<template>
  <section class="multiple">
    <el-select v-model="value" multiple :clearable="clearable" :filterable="filterable" :placeholder="placeholder" :disabled="disabled" style="width: 100%;" @change="handleChange">
      <el-option v-for="(item, index) in list" :key="index" :label="item.name" :value="item.value"></el-option>
    </el-select>
  </section>
</template>
<script>
import mixins from './../mixins'
export default {
  name: 'Multiple',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    }
  },
  computed: {
    list () {
      return this.option.list || []
    },
    filterable () {
      return this.option.filterable
    }
  },
  methods: {
    getValue () {
      return this.value
    },

    setValue (v) {
      if (typeof v === 'string') {
        v = v.split(',');
      }
      this.$set(this, 'value', v)
    },

    setCheck () {
      const { required, value } = this
      if (required) {
        if (!value || value.length == 0) {
          this.error_ = true
          this.error_message_ = '必填选项不能为空'
        } else {
          this.error_ = false
        }
      } else {
        this.error_ = false
      }
      this.fieldCheck()
    },

    handleChange (e) {
      this.setCheck()
      this.dispatch_event('filed-value-change', e)
    }
  }
}
</script>